<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign In and Sign Out Form</title>
</head>
<body>
    <h2>Sign In and Sign Out Form</h2>
    <form id="signinForm">
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username" required><br><br>

        <label for="signin_time">Sign In Time:</label><br>
        <input type="datetime-local" id="signin_time" name="signin_time" required><br><br>

        <label for="signout_time">Sign Out Time:</label><br>
        <input type="datetime-local" id="signout_time" name="signout_time" required><br><br>

        <label for="duration">Duration:</label><br>
        <input type="text" id="duration" name="duration" readonly><br><br>

        <input type="submit" value="Submit">
    </form>

    <script>
        document.getElementById("signin_time").addEventListener("change", updateDuration);
        document.getElementById("signout_time").addEventListener("change", updateDuration);

        function updateDuration() {
            var signinTime = new Date(document.getElementById("signin_time").value);
            var signoutTime = new Date(document.getElementById("signout_time").value);

            // Calculate duration
            var duration = signoutTime - signinTime;
            var hours = Math.floor(duration / (1000 * 60 * 60));
            var minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));

            // Display duration
            document.getElementById("duration").value = hours + " hours, " + minutes + " minutes";
        }
    </script>
</body>
</html>